<template>
  <div class="quit">
    <van-nav-bar
      title="设置"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />
    <van-cell title="手机" is-link :value="userName" />
    <van-cell title="设置密码" is-link @click="pass" />
    <van-dialog v-model:show="show" title="请输入密码" show-cancel-button>
      <!-- @confirm="editPassword"> -->
      <van-cell-group inset>
        <!-- 输入密码 -->
        <van-field v-model="state.password" type="password" label="密码" />
      </van-cell-group>
    </van-dialog>
    <van-cell title="消息设置" is-link />
    <van-cell title="黑名单管理" is-link />
    <van-cell title="微信" is-link value="未绑定" />
    <van-cell title="QQ" is-link value="未绑定" />
    <van-cell title="注销账号" is-link />
    <br />
    <van-button type="default" size="large" @click="exit">退出</van-button>
  </div>
</template>

<script>
import cookie from "../utils/tool";
import { useRouter } from "vue-router";
import { Dialog } from "vant";
import { ref } from "vue";
import { reactive } from "vue";
export default {
  components: {
    [Dialog.Component.name]: Dialog.Component,
  },
  setup() {
    const state = reactive({ password: "" });
    const show = ref(false);
    const route = useRouter();
    const pass = () => {
      // Dialog.alert();
      // show(()=>{ ref(false)});
      show.value = true;
    };
    // const possword =
    // const editPassword = () => {
    //   console.log(1);
    // };
    const userName = `${cookie.get("username").substring(0, 3)}****${cookie
      .get("username")
      .substring(7, 11)}`;
    const exit = () => {
      Dialog.confirm({
        title: "退出",
        message: "是否退出登入？",
      })
        .then(() => {
          cookie.remove("username");
          cookie.remove("password");
          cookie.remove("token");
          route.push("/home/index");
        })
        .catch(() => {
          // on cancel
        });
    };
    const onClickLeft = () => {
      route.push("/home/mine");
    };
    return {
      userName,
      exit,
      route,
      onClickLeft,
      show,
      state,
      pass,
      // editPassword,
    };
  },
};
</script>
<style lang="less" scoped>
.quit {
  .van-button {
    border: 1px solid rgb(240, 240, 240);
  }
}
</style>
